<template>
  <a-modal
    v-model:visible="visible"
    :mask-closable="false"
    width="70vw"
    :title="'发票详情'"
    :title-align="'start'"
    :hide-cancel="true"
    :closable="false"
    @ok="handleOk"
  >
    <div style="height: 70vh">
      <table-container
        v-model:columns="columns"
        v-model:is-fullscreen="isFullscreen"
        :loading="isLoading"
        :all-columns="allColumns"
        @refresh="getData"
      >
        <a-table
          style="margin-top: 16px"
          :columns="columns"
          :data="renderData"
          :loading="isLoading"
          row-key="1"
          :scroll="scroll"
          table-layout-fixed
        />
      </table-container>
    </div>
  </a-modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import { tableRenderConfig } from '../table-comp/invoice-detail-table';

  const isLoading = ref(true);
  const tableObj = ref({});
  const props = defineProps(['activeKey']);
  const scroll = {
    x: 2000,
    y: 200,
  };
  tableObj.value = {
    finishedProduct: [
      '1',
      '2',
      '3',
      '7',
      '8',
      '31',
      '9',
      '32',
      '36',
      '15',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '33',
      '34',
      '25',
      '39',
      '26',
      '27',
      '28',
      '35',
      '30',
    ],
    rawMaterial: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '26',
      '27',
      '28',
      '29',
      '30',
    ],
    spareParts: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '26',
      '27',
      '28',
      '29',
      '30',
    ],
  };
  const renderData = ref<any[]>([]);
  const columns = ref([]);
  const gettableColums = () => {
    columns.value = [];
    tableObj.value[props.activeKey].forEach((v) => {
      Object.keys(tableRenderConfig).forEach((k) => {
        if (v === k) {
          columns.value.push(tableRenderConfig[k]);
        }
      });
    });
  };
  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        1: '1',
        2: 'Jane Doe',
        3: 23000,
        4: '32 Park Road, London',
        5: 'jane.doe@example.com',
      },
      {
        1: '2',
        2: 'Alisa Ross',
        3: 25000,
        4: '35 Park Road, London',
        5: 'alisa.ross@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };
  getData();
  gettableColums();
  const visible = ref(true);
  const allColumns = lodash.cloneDeep(columns);
  const emit = defineEmits(['handleOk']);
  const handleOk = () => {
    emit('handleOk');
  };
</script>
